<template>
  <div class="nav">
    <ul>
      <li v-for="(item,index) in navlist"
          :key="index"
          @click="changeNav(index)">
        <router-link :to="item.url">
          <i :class="'iconfont'+' '+(activeIndex==index?item.activeImg:item.img)"></i>
          <p>{{item.txt}}</p>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "navs",
  data () {
    return {
      activeIndex: 0, //导航激活下标
      navlist: [
        {
          url: "/home",
          activeImg: "icon-jingdong",
          img: "icon-jingdong",
          txt: "首页"
        },
        {
          url: "/fenlei",
          activeImg: "icon-class",
          img: "icon-fenlei",
          txt: "分类"
        },
        {
          url: "/cart",
          activeImg: "icon-49",
          img: "icon-gouwuche-01",
          txt: "购物车"
        },
        {
          url: "/my",
          activeImg: "icon-gerenzhongxin",
          img: "icon-app_icons--",
          txt: "个人中心"
        }
      ]
    }
  },
  methods: {
    changeNav (index) {
      this.activeIndex = index;
    }
  },
}
</script>

<style lang="less" scoped>
//scoped 当前样式只在当前组件生效 不会影响其他组件样式
.nav {
  width: 100%;
  height: 116px;
  background: skyblue;
  position: fixed;
  bottom: 0;
  left: 0;
  ul {
    display: flex;
    width: 100%;
    height: 116px;
    justify-content: space-around;
    list-style: none;
    align-items: center;
    li {
      a {
        color: gray;
        &.router-link-exact-active {
          color: red;
        }
      }
      text-align: center;
      i {
        font-size: 40px;
      }
      p {
        font-size: 20px;
      }
    }
  }
}
</style>